<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
    <style>
        .box {
            margin: 0 auto;
            width: 300px;
            height: 300px;
            background-color: paleturquoise;
        }
        table {
            /*合并重叠边框: 表格上使用比较多 */
            border-collapse: collapse;
            text-align: center;
            /*轮廓线, 不影响元素大小*/
            outline: 1px solid red;
        }
        table tr:nth-child(odd) {
            background-color: pink;
        }

        table tr:nth-child(even) {
            background-color: #bfa;
        }

        /*层叠性, 继承性, 权重*/
        /*伪类选择器*/
        /*状态, 结构, 否定*/
        /*伪元素选择器*/
        /*头部, 尾部, 选中的, 首字母, 首行*/

        /*提升权重, 让样式生效*/
        #colspan {
            height: 40px;
            font-size: 30px;
            line-height: 40px;
            text-align: center;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <table align="center" width="500px"
        border="1" cellspacing="0" cellpadding="0">
        <thead id="th">
            <tr id="colspan">
               <th colspan="3">标题</th>
            </tr>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>刘德华</td>
                <td>56</td>
                <td>男</td>
            </tr>
            <tr>
                <td>张学友</td>
                <td>61</td>
                <td>男</td>
            </tr>
            <tr>
                <td>黎明</td>
                <td>48</td>
                <td>男</td>
            </tr>
            <tr>
                <td>周星驰</td>
                <td>53</td>
                <td>男</td>
            </tr>
            <tr>
                <td>刘德华</td>
                <td>56</td>
                <td>男</td>
            </tr>
            <tr>
                <td>张学友</td>
                <td>61</td>
                <td>男</td>
            </tr>
            <tr>
                <td>黎明</td>
                <td>48</td>
                <td>男</td>
            </tr>
            <tr>
                <td>周星驰</td>
                <td>53</td>
                <td>男</td>
            </tr>
            <tr>
                <td>刘德华</td>
                <td>56</td>
                <td>男</td>
            </tr>
            <tr>
                <td>张学友</td>
                <td>61</td>
                <td>男</td>
            </tr>
            <tr>
                <td>黎明</td>
                <td>48</td>
                <td>男</td>
            </tr>
            <tr>
                <td>周星驰</td>
                <td>53</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
<div class="box">

</div>
</body>

</html>